<template>
  <Menu :isSearch="true"></Menu>
  <div class="home_box">
    <n-layout style="height: 100vh">
      <n-layout position="absolute" style="top: 64px;" has-sider>
        <n-layout-sider
          content-style="padding: 24px;"
          :native-scrollbar="false"
          bordered
          collapse-mode="width"
          :collapsed-width="100"
          :collapsed="collapsed"
          show-trigger
          @collapse="collapsed = true"
          @expand="collapsed = false"
        >
          <LeftMenu :collapsed="collapsed" @joinSpaceData="joinSpaceData"></LeftMenu>
        </n-layout-sider>
        <n-layout content-style="padding: 24px;" :native-scrollbar="false">
          <n-empty v-if="!isAddSpace" size="large" description="暂未加入空间" style="margin-top: 100px;">
            <template #extra>
              <n-button size="small" @click="findSpace">
                发现空间
              </n-button>
            </template>
          </n-empty>
          <template v-else>
            <router-view></router-view>
          </template>
        </n-layout>
      </n-layout>
    </n-layout>
  </div>
  <div class="findSpace" @click="findSpace">
    <n-tooltip trigger="hover">
      <template #trigger>
        <n-icon
        style="cursor: pointer;"
        size="40"
        >
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M11 6c1.38 0 2.63.56 3.54 1.46L12 10h6V4l-2.05 2.05A6.976 6.976 0 0 0 11 4c-3.53 0-6.43 2.61-6.92 6H6.1A5 5 0 0 1 11 6zm5.64 9.14A6.89 6.89 0 0 0 17.92 12H15.9a5 5 0 0 1-4.9 4c-1.38 0-2.63-.56-3.54-1.46L10 12H4v6l2.05-2.05A6.976 6.976 0 0 0 11 18c1.55 0 2.98-.51 4.14-1.36L20 21.49L21.49 20l-4.85-4.86z" fill="currentColor"></path></svg>
        </n-icon>
      </template>
      寻找更多空间
    </n-tooltip>
  </div>
</template>

<script setup lang='ts'>
import Menu from "../components/Menu.vue"
import LeftMenu from "../components/leftMenu.vue"
import {ref, Ref, onMounted} from "vue"
import { useRouter } from "vue-router";
const router = useRouter()

const collapsed:Ref<boolean> = ref(false)
let isAddSpace = ref(false)

onMounted(() => {
  
})

const joinSpaceData = (defaultId:string) => {
  if(defaultId != "0"){
    isAddSpace.value = true
    router.push("/home/spaceHome/" + defaultId)
  }else{
    isAddSpace.value = false
    router.push("/home")
  }
}

const findSpace = () => {
  router.push("/showSpace")
}

</script>

<style lang='scss' scoped>
  .home_box{
    width: 1290px;
    // height: 100px;
    margin: auto;
    
  }
  .findSpace{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 70px;
  }
  .findSpace:hover{
    color: #63e2b7;
    transition: 0.5s;
    transform: scale(1.5);
  }
</style>